/*
관련파일 : canvas_draw.html
내용 : canvas 예제
*/
function $(id)
{
	return document.getElementById(id);
};
/*
function Init()
{
	var ctx = $('canvas').getContext('2d');
	
	$('line').onclick = draw;
	$('rect').onclick = draw;
	$('arc').onclick = draw;
	$('fillrect').onclick = draw;
	$('fillarc').onclick = draw;
	
};
function draw(event)
{
	var ev = event||window.event;
	var el = ev.srcElement.id;	//이벤트가 발생한 요소의 id
	alert(el);
};*/
var type = 'line';
var start_x=10;
var start_y=10;
var move_x=0;
var move_y=0;
var end_x=100;
var end_y=100;
var flag=false;
var ctx;
var scolor;
var fcolor;
var lwidth;


function Init()
{
	canvas = $('canvas');
	
	lineBtn = $('line');
	rectBtn = $('rect');
	arcBtn = $('arc');
	fillrectBtn = $('fillrect');
	fillarcBtn = $('fillarc');
	
	$('lineWidth').onchange = setAtt;
	$('lineColor').onchange = setAtt;
	$('fillColor').onchange = setAtt;
	$('alpha').onchange = setAtt;
	
	
	lineBtn.onclick = function()
	{
		type = line;
	};
	rectBtn.onclick = function()
	{
		type = rect;
	};
	arcBtn.onclick = function()
	{
		type = arc;
	};
	fillrectBtn.onclick = function()
	{
		type = fillrect;
	};
	fillarcBtn.onclick = function()
	{
		type = fillarc;
	};
}
function setAtt(ev)
{
	ev = event || window.event;
	el = ev.srcElement.id;
	switch(el)
	{
	case 'lineWidth':
		lwidth = $('lineWidth').value;
	break;
	case 'lineColor':
		lcolor = $('lineColor').value;
	break;
	case 'fillColor':
		fcolor = $('fillColor').value;
	break;
	case 'alpha':
		ctx.globalAlpha = $('alpha').value;
	break;
	}
}
function m_down()
{
	start_x = window.event.clientX - 10;
	start_y = window.event.clientY - 10;
	move_x = 0;
	move_y = 0;
	end_x = 0;
	end_y = 0;
	
	flag = true;
};
function m_move()
{
	if(flag)
	{
		clear(start_x, start_y, move_x, move_y, type);
		move_x = window.event.clientX - start_x;
		move_y = window.event.clientY - start_y;
		
		prn(start_x, start_y, move_x, move_y, type);
	}
};
function m_up()
{
	flag = false;
	end_x = window.event.clientX - start_x;
	end_y = window.event.clientY - start_y;
	
	prn(start_x, start_y, end_x, end_y, type);
};
function clear(sx, sy, ex, ey, type)
{
	
	if(type==line)
	{
		//ctx.clearRect(start_x,start_y,move_x,move_y);
	}
	else if(type==rect)
	{
		ctx.clearRect(sx, sy, ex, ey);
	}
	else if(type==arc)
	{
		ctx.clearArc(start_x,start_y,move_x,move_y);
	}
	else if(type==fillrect)
	{
		ctx.clearRect(sx, sy, ex, ey);
	}
	else if(type==fillarc)
	{
		ctx.clearArc(start_x,start_y,move_x,move_y);
	}
}
function prn(sx, sy, ex, ey, type)
{
	
	ctx = canvas.getContext("2d");
	canvas = $('canvas');
	ctx.beginPath();
	
	ctx.lineWidth = lwidth;
	ctx.strokeStyle = lcolor;
	ctx.fillStyle = fcolor;
	
	if(type==line)
	{
		ctx.moveTo(sx, sy);
		ctx.lineTo(ex + sx, ey + sy);
		ctx.closePath();
		ctx.stroke();
	}
	else if(type==rect)
	{
		ctx.strokeRect(sx, sy, ex, ey);
		ctx.closePath();
	}
	else if(type==arc)
	{
		var pi = Math.sqrt(ex*ex + ey*ey);
			ctx.moveTo(sx, sy);
			ctx.arc(sx, sy, pi, Math.PI*1.8, Math.PI*0.2, true);
			ctx.closePath();
		ctx.stroke();
		ctx.beginPath();
			ctx.arc(sx+(pi/4), sy-(pi-(pi/3)), pi/10, 0, Math.PI*2, false);
			ctx.fill();
		ctx.stroke();
	}
	else if(type==fillrect)
	{
		ctx.rect(sx, sy, ex, ey);
		ctx.fill();
		ctx.stroke();
		ctx.closePath();
	}
	else if(type==fillarc)
	{
		ctx.moveTo(sx, sy);
		ctx.arc(sx, sy, ex+ey, Math.PI*0, Math.PI*2, true);
		ctx.closePath();
		ctx.fill();
		ctx.stroke();
		ctx.closePath();
	}
	$('diva').innerHTML = $('alpha').value;
}